<!doctype html>
<html>
<head>
    <title>JS Tester</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid black
        }
    </style>
</head>
<body> 
    <div class="container">
        <div class="box" id="box0">Box #1</div>
        <div class="box" id="box1">Box #2</div>
        <div class="box" id="box2">Box #3</div>
        <div class="box" id="box3">Box #4</div>
    </div> 
    <script>      
      const main = document.querySelector(".container");
      const boxes = document.querySelectorAll(".box");
      main.addEventListener("click", (e) => {
          console.log("4");
      },false);
      main.addEventListener("click", (e) => {
          console.log("1");
      },true);
 
      boxes.forEach(ele => {
          ele.addEventListener("click", (e) => {
              console.log("3");
              console.log(e.target.textContent);
          },false);
          ele.addEventListener("click", (e) => {
              console.log("2");
              console.log(e.target.textContent);
          },true);
   
      })
  </script>

</body>
</html>
